<template>
  <div id="box">
    <div class="navbar">
      <van-nav-bar
        title=" 修改头像"
        @click-left="$router.push('/mine')"
        :border="false"
      >
        <template #left>
          <van-icon name="arrow-left" color="black" size="18px" />
        </template>
      </van-nav-bar>
    </div>
    <div id="banner">
      <form
        :action="`http://1.15.223.82:3000/v1/repic?uid=${this.$store.state.user.uid}`"
        name="avatar"
        method="post"
        enctype="multipart/form-data"
        target="st"
      >
        <input type="file" name="avatar" />
        <button type="submit" @click="submit">上传</button>
      </form>

      <iframe name="st"></iframe>
    </div>
  </div>
</template>

<script>
import { getMEssage } from "@/api/request";
import { Toast } from "vant";
export default {
  data() {
    return {};
  },
  methods: {
    // 上传成功跳转到我的页面
    jump() {
      Toast.success({ message: "更改成功!" });
      this.$router.push("/");
    },
    submit() {
      try {
        document.fileForm.submit();
      } catch (error) {
        console.log(error);
      }
      getMEssage({ uid: this.$store.state.user.uid }).then(res => {
        console.log(res);
        this.$store.commit("changePic", res.data[0].pic);
        Toast.success({ message: "更换成功!" });
        this.$router.push("/mine");
      });
    },
  },
  mounted() {},
  computed: {},
};
</script>

<style lang="scss" scoped>
iframe {
  border: 0;
  width: 0;
  height: 0;
}
.van-nav-bar {
  ::v-deep .van-icon {
    color: black;
  }
  ::v-deep .van-nav-bar__title {
    font-weight: bold;
    font-family: "黑体";
  }
}
#box {
  width: 340px !important;
  height: 500px !important;
  box-sizing: border-box;
  overflow: hidden;
  #banner {
    margin: 0 auto;
    width: 300px !important;
  }
}
</style>
